<template>
    <addEditRepairSetView ref="addEditRepairSetView" />
    <addFileView ref="addFileView" />
    <el-main>
        <div class="teacher">
            <div class="app-table">
                <div>
                    <el-form :model="addRepairSetForm" ref="addRepairSetRef" :rules="addRepairSetrules">
                        <el-form-item label="接单方式：" :label-width="formLabelWidth">
                            <el-select v-model="addRepairSetForm.receivingMethod" placeholder="请选择接单方式">
                                <el-option label="维修员接单" :value="1"></el-option>
                                <el-option label="管理员派单" :value="2"></el-option>
                                <el-option label="报修员派单" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="结单方式：" :label-width="formLabelWidth" prop="endMethod"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.endMethod" placeholder="请选择结单方式">
                                <el-option label="填写评价结单" :value="1"></el-option>
                                <el-option label="维修完成结单" :value="2"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="显示报修级别：" :label-width="formLabelWidth" prop="displayRepairLevel"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.displayRepairLevel" placeholder="请选择是否显示报修级别">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="显示报修类型：" :label-width="formLabelWidth" prop="displayRepairType"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.displayRepairType" placeholder="请选择是否显示报修类型">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报修地址形式：" :label-width="formLabelWidth" prop="addressMethod"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.addressMethod" placeholder="请选择报修地址形式">
                                <el-option label="自由填写" :value="1"></el-option>
                                <el-option label="选择地址" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="显示人员部门：" :label-width="formLabelWidth" prop="displayDepartment"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.displayDepartment" placeholder="请选择是否显示部门">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="显示人员电话：" :label-width="formLabelWidth" prop="showPhone"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.showPhone" placeholder="请选择是否显示电话">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="显示报修人姓名：" :label-width="formLabelWidth" prop="showName"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.showName" placeholder="请选择是否显示报修人姓名">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="填写报修备注：" :label-width="formLabelWidth" prop="showComments"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.showComments" placeholder="请选择是否填写报修备注">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="填写故障描述：" :label-width="formLabelWidth" prop="fillDescription"
                            v-if="addRepairSetForm.id">
                            <el-input v-model="addRepairSetForm.fillDescription" autocomplete="off" ref="name"
                                placeholder="请填写是否填写地址"></el-input>
                        </el-form-item> -->
                        <el-form-item label="上传报修图片：" :label-width="formLabelWidth" prop="dispalyPictures"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.dispalyPictures" placeholder="请选择是否上传报修图片">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="维修后填写耗材：" :label-width="formLabelWidth" prop="fillConsumables"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.fillConsumables" placeholder="请选择维修后是否填写耗材">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="上传维修图片：" :label-width="formLabelWidth" prop="uploadMaintenancePicture"
                            v-if="addRepairSetForm.id">
                            <el-select v-model="addRepairSetForm.uploadMaintenancePicture" placeholder="请选择是否上传维修图片">
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                      
                    </el-form>
                    <span class="dialog-footer">
                        <el-button class="serach_btn" type="primary" plain @click="save()">保存</el-button>
                    </span>
                </div>
            </div>
        </div>
    </el-main>
</template>
<script>
import addEditRepairSetView from "@/components/repair/addEditRepairSet.vue";
import addFileView from "@/components/addExcelFile.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload } from "@element-plus/icons-vue";

export default {
    name: "RepairSetListView",
    data() {
        return {
            formLabelWidth: 140,
            type: 0,
            title: "",
            page: 0,
            pageSize: 1,
            total: 0,
            limit: 1,
            list: [],
            addRepairSetForm: {
            },
        };
    },
    components: {
        addEditRepairSetView,
        addFileView,
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage, Upload
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getRepairSetList();
    },
    watch: {
        $route() {
            this.getRepairSetList();
        },
    },
    methods: {
        save() {
                this.$refs.addRepairSetRef.validate((valid) => {
                    if (valid) {
                        let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                        params.append("receivingMethod", this.addRepairSetForm.receivingMethod);
                        params.append("endMethod", this.addRepairSetForm.endMethod);
                        params.append("displayRepairLevel", this.addRepairSetForm.displayRepairLevel);
                        params.append("displayRepairType", this.addRepairSetForm.displayRepairType);
                        params.append("addressMethod", this.addRepairSetForm.addressMethod);
                        params.append("displayDepartment", this.addRepairSetForm.displayDepartment);
                        params.append("showPhone", this.addRepairSetForm.showPhone);
                        params.append("showName", this.addRepairSetForm.showName);
                        params.append("fillDescription", this.addRepairSetForm.fillDescription);
                        params.append("dispalyPictures", this.addRepairSetForm.dispalyPictures);
                        params.append("fillConsumables", this.addRepairSetForm.fillConsumables);
                        params.append("uploadMaintenancePicture", this.addRepairSetForm.uploadMaintenancePicture);
                        params.append("showComments", this.addRepairSetForm.showComments);
                        if (this.addRepairSetForm.id) {
                            params.append("id", this.addRepairSetForm.id);
                            httpService("/javaApi/repairSet/edit", params, "post").then(
                                (data) => {
                                    if (data.code == 200) {
                                        ElMessage.success("修改成功");
                                        this.clear();
                                        //刷新父组件的数据
                                        this.$parent.getRepairSetList();
                                    } else {
                                        ElMessage.error("修改失败");
                                    }
                                }
                            );
                        } else {
                            httpService("/javaApi/repairSet/add", params, "post").then(
                                (data) => {
                                    if (data.code == 200) {
                                        ElMessage.success("添加成功");
                                        this.clear();
                                        //刷新父组件的数据
                                        this.$parent.getRepairSetList();
                                    } else {
                                        ElMessage.error("添加失败");
                                    }
                                }
                            );
                        }
                    } else {
                        return false;
                    }
                });
            },
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getRepairSetList();
            }
        },
        add() {
            this.$refs.addEditRepairSetView.title = "添加报修配置表"
            this.$refs.addEditRepairSetView.personnelType = this.type
            this.$refs.addEditRepairSetView.dialogFormVisible = true;
        },
        editRepairSet(obj) {
            this.$refs.addEditRepairSetView.title = "修改信息"
            this.$refs.addEditRepairSetView.getRepairSetById(obj.id);
            this.$refs.addEditRepairSetView.dialogFormVisible = true;
        },
        deleteRepairSet(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/repairSet/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getRepairSetList();
                            } else {
                                ElMessage.error(data.message);
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        reloadData() {
            this.page = 1;
            this.getRepairSetList()
        },
        importExcel() {
            this.$refs.addFileView.dialogFormVisible = true;
            this.$refs.addFileView.title = "批量导入报修配置表";
            this.$refs.addFileView.uploadApiUrl = "/javaApi/repairSet/importExcel";
        },
        exportExcel() {
            httpService(
                "/javaApi/repairSet/exportExcel",
                {
                },
                "get"
            ).then((data) => {
                if (data.code == 200) {
                    window.open(data.msg, '_blank')
                }
            });
        },
        onSubmit() {
            this.getRepairSetList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getRepairSetList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getRepairSetList();
        },
        tableRowClassName({ row, rowIndex }) {
            return "";
        },
        getRepairSetList() {
            httpService(
                "/javaApi/repairSet/list/" + this.page + "/" + this.pageSize,
                {
                },
                "get"
            ).then((data) => {
                this.addRepairSetForm = data.list[0];
            });
        },
    },
};
</script>
<style scoped>
    .dialog-footer{
        margin-left: 140px;
    }
.el-main {
    padding: 0px;
}

.teacher-content {
    width: 100%;
}

.app-table {
    background: white;
    padding: 20px;
}

.app-search {
        margin-top: 10px;
        text-align:left;
    }

.app-separator {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

.app-body {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 204px);
    text-align:left;

}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
    text-align: center;
    margin-top: 10px;
}
.serach_btn {
  background-color: #007EFF;
  color: #fff;
  border-radius: 8px;
  border: none;
}


</style>

